import React, { Component } from 'react';
import {
	StyleSheet, DeviceEventEmitter, View, Image, FlatList
} from "react-native";
import { style } from '../../theme/style.js';
import { Common } from '../../component/common/Common.js'
import MessageService from './_common/service.js';
import StorageHelper from '../../utils/storageHelper';
import { STORAGE_CONSTANT } from '../../config/storage';
import { GLOBAL } from '../../config/global';
import { NewAccount } from '../../components/common/newAccount';
import { SlideSelect } from '../../components/common/slideSelect';
const scale = GLOBAL.SCALE;


export class MessageIndexPage extends Component {
	static navigationOptions = ((navigation) => {
		//console.log('navigation', navigation)
		return {
			headerTitle: '消息中心',
			headerLeft: <Common type="headLeft" onPress={() => { navigation.navigation.goBack() }} color='#fff' />,
			headerRight: (<Image style={style.head.headRightEmpty} source={require('../../imgs/goBackEmpty.png')} />),
			headerTintColor: style.color.white,
			headerStyle: style.head.headerStyle,
			headerTitleStyle: style.head.headerTitleStyle,
			gesturesEnabled: false  //禁止侧滑返回事件
		}
	})
	constructor(props) {
		super(props);
		this.state = {
			countNotice: 0,
			countSellList: 0,
			countBuyList: 0,
			countCompanyList: 0,
			loadIcon: false,
			options: [],
			choice: {},
			alertShow: false,
		};
	}

	async	componentWillMount () {
		await this._getSorage();
		this._getData();
	}

	componentDidMount () {
		DeviceEventEmitter.addListener('getImgUrl', (res) => {
			if (res.onoff) {
				this._getData();
			}
		});
	}

	//获取业务组织
	async _getSorage () {
		const userInfoJson = await StorageHelper.get(STORAGE_CONSTANT.USER_INFO_KEY);
		const userInfo = JSON.parse(userInfoJson);
		this.setState({
			options: userInfo.corpInfoTOs || [],
			choice: userInfo.corpInfoTOs[0] || {}
		})
	}
	//
	async	_getData () {
		const responseData = await MessageService.unreadList({ corpId: this.state.choice.corpId });
		if (responseData) {
			this.setState({
				countNotice: 0,
				countSellList: 0,
				countBuyList: 0,
				countCompanyList: 0
			})
			for (var i = 0; i < responseData.length; i++) {
				if (responseData[i].bizType == '0') {
					this.setState({
						countNotice: responseData[i].count
					})
				} else if (responseData[i].bizType == '1') {
					this.setState({
						countSellList: responseData[i].count
					})
				} else if (responseData[i].bizType == '2') {
					this.setState({
						countBuyList: responseData[i].count
					})
				} else if (responseData[i].bizType == '3') {
					this.setState({
						countCompanyList: responseData[i].count
					})
				}
			}
		}
	}
	//跳列表
	_goList = (bizType) => {
		let params = {
			bizType,
			corpId: this.state.choice.corpId,
			callBack: () => {
				this._getData();
			}
		}
		this.props.navigation.navigate('MessageListPage', params);
	}
	_createEmptyView = () => {
		let imgNotice = require('../../imgs/notice.png');
		let imgSell = require('../../imgs/Group4.png');
		let imgBuy = require('../../imgs/Group5.png');
		let imgCompay = require('../../imgs/Group6.png');
		let { countNotice, countSellList, countBuyList, countCompanyList } = this.state;
		return (
			<View style={styles.container}>
				<View style={styles.listBox}>
					<Common type="messageList" callBack={() => { this._goList(0) }} title="公告" number={countNotice} imgUrl={imgNotice} />
					<Common type="messageList" callBack={() => { this._goList(1) }} title="销售申请" number={countSellList} imgUrl={imgSell} />
					<Common type="messageList" callBack={() => { this._goList(2) }} title="采购申请" number={countBuyList} imgUrl={imgBuy} />
					<Common type="messageList" callBack={() => { this._goList(3) }} title="企业通知" number={countCompanyList} imgUrl={imgCompay} />
				</View>
			</View>
		);
	}
	render () {
		let { options, choice, alertShow } = this.state || {};
		return (
			<View style={{ flex: 1 }}>
				<View style={styles.tabBox}>
					{options.length > 1 ?
						<View style={styles.pf}><NewAccount fn={(val) => { this.setState({ alertShow: val }) }} choice={choice.corpName || ''} /></View> : null}
				</View>
				<FlatList
					style={styles.container}
					// 空布局
					ListEmptyComponent={this._createEmptyView}
					//下拉刷新相关
					onRefresh={() => this._getData()}
					refreshing={this.state.loadIcon}
				/>
				{options.length ? <SlideSelect alertShow={alertShow} options={options}
					select={(val) => {
						console.log('val', choice);
						this.setState({ choice: val || options[0], alertShow: false }, () => {
							this._getData();
						})
					}}
					unselect={() => {
						this.setState({ alertShow: false })
					}} /> : null}
			</View>
		);
	}
}

const styles = StyleSheet.create({
	container: {
		flex: 1,
		backgroundColor: style.color.light
	},
	tabBox: {
		width: '100%',
		height: 30 * scale,
		flexDirection: 'row',
		justifyContent: 'center',
		backgroundColor: style.color.themeColor
	},
	pf: {
		marginLeft: 20 * scale
	}
});